
// let canvas = document.createElement('canvas') //创建虚拟dom
let canvas = document.getElementById('canvas') //找到dom

if (canvas.getContext) {		//监测浏览器是否支持canvas
    canvas.width = 1920
    canvas.height = 900
    var ctx = canvas.getContext('2d');

    // ctx.fillStyle = 'green';
    // ctx.strokeRect(10, 100, 50, 50)

    ctx.fillStyle = 'green';
    ctx.strokeStyle = "white"
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 100);
    ctx.lineTo(200, 200);
    ctx.lineTo(100, 200);
    ctx.fill(); //实心三角
    //空心三角
    ctx.closePath();
    ctx.stroke();

    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.moveTo(100, 120);
    ctx.lineTo(100, 100);
    ctx.lineTo(140, 100);
    ctx.fill(); //实心三角
    //空心三角
    ctx.closePath();
    ctx.stroke();

    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.moveTo(200, 120);
    ctx.lineTo(200, 100);
    ctx.lineTo(160, 100);
    ctx.fill(); //实心三角
    //空心三角
    ctx.closePath();
    ctx.stroke()


    // //圆路径 x-横坐标 y-纵坐标 radius-圆半径 (必填)
    // ctx.arc(100, 100, 50, 0, 2 * Math.PI)

    //裁剪
    const cx = 320;
    const cy = 100;
    const radius = 90;
    ctx.save();
    // 绘制第一个圆 
    ctx.beginPath();
    ctx.fillStyle = 'tomato';
    ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.clip()

    // 绘制第二个圆 
    ctx.beginPath();
    ctx.fillStyle = '#333';
    ctx.arc(cx + 100, cy, radius, 0, Math.PI * 2, false);
    ctx.fill();


    // 绘制第三个圆 
    ctx.beginPath();
    ctx.fillStyle = 'cornsilk';
    ctx.arc(cx, cy + 100, radius, 0, Math.PI * 2, false);
    ctx.fill();

    // 绘制第四个圆 
    ctx.beginPath();
    ctx.strokeStyle = '#ccc';
    ctx.lineWidth = 10;
    ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
    ctx.stroke();
    ctx.restore()

}


// // 元素获取
// const canvas = document.querySelector("canvas")
// const ctx = canvas.getContext("2d");
// // 设定画布大小
// function resizeCanvas() {
//     canvas.width = window.innerWidth
//     canvas.height = window.innerHeight
// }
// resizeCanvas();
// // 页面缩放改变画布大小  监听浏览器窗口大小发生变化
// window.addEventListener("resize", resizeCanvas)

// function clickSite(e) {
//     // 获取当前鼠标的坐标
//     let x = e.clientX;
//     let y = e.clientY;
//     // 绘制
//     addFires(x, y);
// }
// document.addEventListener('click', clickSite);

// function drawFires() {
//     // 初始半径，以及粒子数量
//     let count = 10;
//     let radius = 10;
//     for (let i = 0; i < count; i++) {
//         // 渲染出当前数据
//         // 下面是点数学题
//         // moveX，moveY是粒子开始的坐标，画个三角形，角度半径知道很容易就得出方程
//         let angle = 360 / count * i;
//         let radians = angle * Math.PI / 180;
//         let moveX = x + Math.cos(radians) * radius
//         let moveY = y + Math.sin(radians) * radius
//         // 开始路径
//         ctx.beginPath();
//         ctx.arc(moveX, moveY, 2, Math.PI * 2, false);
//         // 结束
//         ctx.closePath();
//         ctx.fillStyle = '#ff0000'
//         ctx.fill();
//     }
// }